<script setup lang="ts">

import {Button} from "@/components/ui/button";
import {
  ActivityIcon,
  BarChart3Icon, DollarSignIcon,
  Package2Icon,
  PlusIcon,
  ShoppingCartIcon,
  Users2Icon,
  UsersRoundIcon
} from "lucide-vue-next";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
import DateRangePicker from "@/components/DateRangePicker.vue";
import {Separator} from "@/components/ui/separator";
import RecentActivity from "@/pages/dashboard/components/RecentActivity.vue";
import AreaChartStacked from "@/pages/dashboard/components/AreaChartStacked.vue";

const tabsData = [
  {
    title: "Total Revenue",
    icon: DollarSignIcon,
    value: "$45,231.89",
    description: "+20.1% from last month",
  },
  {
    title: "Subscriptions",
    icon: UsersRoundIcon,
    value: "+2350",
    description: "+180.1% from last month",
  },
  {
    title: "Sales",
    icon: ShoppingCartIcon,
    value: "+12,234",
    description: "+19% from last month",
  },
  {
    title: "Active Now",
    icon: ActivityIcon,
    value: "+573",
    description: "+201 since last hour",
  }
]

</script>

<template>
  <div class="w-full flex flex-col items-stretch gap-4">
    <div class="flex flex-wrap items-end justify-between gap-2">
      <div>
        <h2 class="text-2xl font-bold tracking-tight">
          Dashboard
        </h2>
        <p class="text-muted-foreground">
          Welcome back! Here&apos;s what&apos;s happening with your business today.
        </p>
      </div>
      <Button>
        <Component :is="PlusIcon" class=""/>
        <span>Add New</span>
      </Button>
    </div>

    <Separator/>

    <Tabs default-value="overview" class="space-y-4">
      <div class="flex items-center justify-between space-y-2">
        <TabsList>
          <TabsTrigger value="overview">
            Overview
          </TabsTrigger>
          <TabsTrigger value="analytics" disabled>
            Analytics
          </TabsTrigger>
          <TabsTrigger value="reports" disabled>
            Reports
          </TabsTrigger>
          <TabsTrigger value="notifications" disabled>
            Notifications
          </TabsTrigger>
        </TabsList>
        <div class="flex items-center space-x-2">
          <DateRangePicker/>
          <Button>Download</Button>
        </div>
      </div>

      <TabsContent value="overview" class="space-y-4">
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card v-for=" ttd in tabsData">
            <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle class="text-sm font-medium">
                {{ ttd.title }}
              </CardTitle>
              <Component :is="ttd.icon" class="h-4 w-4 text-muted-foreground"/>
            </CardHeader>
            <CardContent>
              <div class="text-2xl font-bold">
                {{ ttd.value }}
              </div>
              <p class="flex items-center text-xs text-muted-foreground">
                {{ ttd.description }}
              </p>
            </CardContent>
          </Card>
        </div>

        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
          <Card class="col-span-4">
            <CardHeader>
              <CardTitle>Overview</CardTitle>
              <CardDescription>
                Your revenue and sales overview for the last 12 months.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <AreaChartStacked/>
            </CardContent>
          </Card>
          <Card class="col-span-3">
            <CardHeader>
              <CardTitle>Recent Activity</CardTitle>
              <CardDescription>
                Your latest business activities.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <RecentActivity/>
            </CardContent>
          </Card>
        </div>
      </TabsContent>
    </Tabs>

    <Card>
      <CardHeader>
        <CardTitle>Quick Actions</CardTitle>
        <CardDescription>
          Common tasks you can perform quickly
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Button variant="outline" class="h-20 flex-col">
            <Component :is="Users2Icon" class="h-6 w-6 mb-2"/>
            <span>Manage Users</span>
          </Button>
          <Button variant="outline" class="h-20 flex-col">
            <Component :is="Package2Icon" class="h-6 w-6 mb-2"/>
            <span>Add Product</span>
          </Button>
          <Button variant="outline" class="h-20 flex-col">
            <Component :is="ShoppingCartIcon" class="h-6 w-6 mb-2"/>
            <span>View Orders</span>
          </Button>
          <Button variant="outline" class="h-20 flex-col">
            <Component :is="BarChart3Icon" class="h-6 w-6 mb-2"/>
            <span>Analytics</span>
          </Button>
        </div>
      </CardContent>
    </Card>

  </div>
</template>


<style scoped>

</style>
